<!--
 * new page
 * @author: sunYihui
 * @since: 2024-09-02
 * RightTableView.vue
-->
<template>
    <div class="box">
        <div class="box_title">
            待维修处理：
        </div>
        <div class="box_items">
            <div class="box_item" v-for="(item, index) in repairs.list" :key="index">

                {{ index + 1 }}、 <span class="blue">{{ item.address }}：</span>{{ item.content }}

            </div>
        </div>
    </div>
    <!-- 待投诉处理： -->
    <div class="box">
        <div class="box_title">
            待投诉处理：
        </div>
        <div class="box_items">
            <div class="box_item" v-for="(item, index) in questions.list" :key="index">
                {{ index + 1 }}、 <span class="blue">{{ item.address }}：</span>{{ item.content }}
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
//维修列表
import { getList } from '../../service/repairs/repairs'
import { Repairs } from '../../service/repairs/type'
import { toRaw } from 'vue';
import { reactive } from 'vue';

let repairs = reactive<Repairs>({
    list: []
})

const getRepairs = async () => {
    const res = await getList({
        key: '',
        state: 0,
        page: 1,
        psize: 5
    })
    repairs.list = toRaw(res.data.list.splice(0, 5))
    console.log(repairs.list);
}
getRepairs()

//问题列表
import { questionsList } from '../../service/questions/questions'
import { Question } from '../../service/questions/type'

let questions: Question = reactive({
    list: []
})

const getQuestions = async () => {
    const res = await questionsList()
    questions.list = toRaw(res.data.list.splice(0, 5))
    console.log(questions.list);
}
getQuestions()</script>

<style scoped>
.box {
    height: 300px;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 12px #0000001a;
    margin-bottom: 30px;
    padding: 0 30px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 0 0 8px 8px;

    .box_title {
        font-size: 13px;
        margin: 25px 0 15px;
    }

    .box_items {
        width: 100%;
        height: 200px;
        font-size: 13px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .box_item {
            width: 100%;
            overflow: hidden;
            /*超出部分隐藏*/
            white-space: nowrap;
            /*禁止换行*/
            text-overflow: ellipsis;
            /*省略号*/
        }

        .blue {
            color: #2981ff;
            cursor: pointer;
        }
    }
}
</style>
